import { OrderType } from '@/enums'
import {
  cancelOrder,
  deleteOrder,
  followOrUnfollow,
  getPrescriptionPic
} from '@/services/consult'
import { getMedicineOrderDetail } from '@/services/order'
import type { ConsultOrderItem, Doctor, FollowType } from '@/types/consult'
import type { OrderDetail } from '@/types/order'
import { showFailToast, showImagePreview, showSuccessToast } from 'vant'
import { ref, onMounted, onUnmounted } from 'vue'

// 封装我们 自定义的组合式函数 => 自定义hook
export function useWindowWidth() {
  const width = ref(0)
  // 以下代码虽然有效果 但是由于在setup中只会执行一次(bug: 必须手动刷新 当前屏幕才会适配)
  // width.value = window.innerWidth

  const fn = () => {
    console.log('resize')
    width.value = window.innerWidth // 当前屏幕的宽度
  }

  // 解决: 在屏幕变化后 获取到最新的屏幕宽度即可?? => window.onresize
  onMounted(() => {
    fn() // 页面加载结束 先调用一次获取最新宽度
    window.addEventListener('resize', fn) // 每次屏幕变化后 自动获取最新的宽度
  })
  // 由于在onMounted注册了一个全局事件 将来如果不移除 那么会一直占用内存 会一直有resize效果 => 我们点击了别的页面, 不需要这个resize效果的
  // 一定需要我们去移除这个全局事件 => 释放内存 => 性能提升
  onUnmounted(() => {
    // 页面卸载了
    window.removeEventListener('resize', fn)
  })

  return {
    width
  }
}

// useWindowWidth => 这个hook函数早就有人写好了 => 你可以直接用
// 有那么一帮人 => 封装了一堆hook函数 一堆组合式函数 => 组合式函数库 hooks库 => v3中的组合式函数库(@vueuse/core)

// const { loading, follow } =  useFollow<Doctor>('doc')
// const { loading, follow } =  useFollow<Knowledge>('knowledge')
export function useFollow<T extends { id: string; likeFlag: 0 | 1 } = Doctor>(
  type: FollowType = 'doc'
) {
  // T 是泛型参数 在定义时没有任何类型的限制; 在调用时 才会传入一个具体的类型
  // 泛型约束 => 泛型参数在定义时虽然没有类型限制 但是可以对其约束 一旦约束 就必须满足约束条件
  const loading = ref(false)
  const follow = async (item: T) => {
    try {
      loading.value = true
      // 请求接口关注医生
      await followOrUnfollow(item.id, type)
      showSuccessToast('操作成功')
      item.likeFlag = item.likeFlag === 0 ? 1 : 0 // 暴力直接更新  不能发请求获取最新列表
    } catch {
      showFailToast('操作失败')
    } finally {
      loading.value = false
    }
  }

  return {
    loading,
    follow
  }
}

// const { look } = useLook()
export const useLook = () => {
  const look = async (id: string) => {
    const res = await getPrescriptionPic(id)
    // console.log(res.data.url) // 处方图片地址
    showImagePreview([res.data.url])
  }

  return {
    look
  }
}

export const useDelete = (callback: () => void) => {
  const deleteLoading = ref(false)
  const deleteConsultOrder = async (item: ConsultOrderItem) => {
    try {
      deleteLoading.value = true
      await deleteOrder(item.id)
      showSuccessToast('删除成功')
      // emit('on-delete', item.id) // => 标准的子传父
      callback()
    } catch (error) {
      showFailToast('删除失败')
    } finally {
      deleteLoading.value = false
    }
  }

  return {
    deleteLoading,
    deleteConsultOrder
  }
}

export const useCancel = () => {
  const loading = ref(false)
  const cancelConsult = async (item: ConsultOrderItem) => {
    try {
      loading.value = true
      await cancelOrder(item.id) // 取消

      // 同步更新页面数据(1.子传父   2.利用引用数据类型直接更新数据)
      item.status = OrderType.ConsultCancel // 状态改已取消
      item.statusValue = '已取消'

      showSuccessToast('操作成功')
    } catch (error) {
      showFailToast('操作失败')
    } finally {
      loading.value = false
    }
  }

  return {
    loading,
    cancelConsult
  }
}

export const useMedicalOrderDetail = (id: string) => {
  const order = ref<OrderDetail>() // 订单详情
  async function loadDetail() {
    const res = await getMedicineOrderDetail(id)
    order.value = res.data
  }
  onMounted(() => {
    loadDetail()
  })

  return {
    order
  }
}
